<!-- components/Search.vue -->
<template>
	<div class="flex items-center">
		<!-- 移动端：只显示一个图标按钮 -->
		<button
			type="button"
			class="md:hidden p-1.5 ml-1 rounded-full text-gray-500 bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
			@click="searchClickModal"
		>
			<SearchIcon class="h-4 w-4" />
		</button>

		<!-- PC端：显示完整的搜索框 -->
		<div
			@click="searchClickModal"
			class="hidden md:flex items-center rounded-full px-3 py-1.5 ml-2 transition-colors border-2 border-sky-100 dark:border-sky-900 bg-gray-50 text-gray-600 placeholder-gray-400 duration-300 dark:bg-gray-700 dark:text-gray-300 dark:placeholder-gray-500"
		>
			<SearchIcon class="h-4 w-4 mr-1 flex-shrink-0" />
			<div class="text-gray-700 font-medium text-base dark:text-gray-200" >搜索 </div>
		</div>


		<GenericModal
			v-model="showModal" 
			position="center"
			animation-type="slide-up"
			:closeOnClickOverlay="false"
		>
			<SearchMoadl @close="closeModal" />
		</GenericModal>
	</div>
</template>

<script setup>
import { ref, computed } from "vue";
import SearchIcon from "@/components/icon/SearchIcon.vue";
import { useModal } from '@/hooks/useModal'
import SearchMoadl from '@/modal/components/SearchMoadl.vue'
import GenericModal from "@/modal/GenericModal.vue"
import { useRouter } from "vue-router";

const router = useRouter();

const modal = useModal()

const closeModal = () => {
	showModal.value = !showModal.value
}

const showModal = ref(false)

// 点击事件
const searchClickModal = () => {
	showModal.value = !showModal.value
};
</script>
